<template>
  <view :style="customStyle" :class="customClass" class="zm-empty">
    <image
      :src="imgInfo[emptyType].icon || src"
      class="zm-empty__image"
      mode="aspectFit"
      :style="[pattern, imgInfo[emptyType].style]"
    />
    <view class="tc fc8 fs25 mt20"> {{ imgInfo[emptyType].tip || text }} </view>
  </view>
</template>

<script>
  import images from '@/commons/ZmMescrollEmpty/const.js'
  import styleMixins from '@/mixins/styleMixins'

  export default {
    name: 'yy-empty',
    mixins: [styleMixins],
    props: {
      //图片地址
      src: {
        type: String,
        default() {
          return 'https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/empty/on-content.png'
        }
      },
      //文字颜色
      color: {
        type: String
      },
      width: {
        type: String,
        default: ''
      },
      height: {
        type: String,
        default: ''
      },
      //文字提示
      text: {
        type: String,
        default: '暂无数据'
      },
      //icon的颜色，字体图标时有效
      iconColor: { type: String },
      //提示文字的大小，单位rpx
      fontSize: { type: [String, Number] },
      //提示文字的大小，单位rpx
      iconSize: {
        type: [String, Number],
        default: '180rpx'
      },
      //组件到上一个元素的间距,单位rpx
      marginTop: {
        type: [String, Number]
      },
      //内置的图标
      mode: {
        type: String,
        default: 'data'
      },
      //空数据类型
      emptyType: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    computed: {
      pattern() {
        if (this.width || this.height) {
          return `width:${this.width};height:${this.height}`
        } else {
          return ''
        }
      },
      imgInfo() {
        return images
      }
    },
    methods: {}
  }
</script>

<style lang="scss">
  .zm-empty {
    &__image {
      height: 315rpx;
      width: 350rpx;
      display: block;
      margin: 0 auto;
    }
  }
</style>
